<template>
	<div class="bear-PieChart">
		<SizeObserver
				class="bear-container"
				@bear-resize="$_bear_resizeFn">
			<div class="bear-title"
				 v-if="!solid"
				 :style="titleStyle">
				<slot name="center-title">
					<div style="height:100%;display:flex;justify-content:center;align-items:center;"
						 :style="{fontSize:fontSize,color:fontColor}">{{centerTitle}}</div>
				</slot>
			</div>
			<div ref="chart" class="bear-chart" v-on="listeners"></div>
		</SizeObserver>
	</div>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils echarts */
	/**
	 * @author 唐国雄
	 * 饼状图
	 * 属性----------------------
	 * :renderer		渲染方式,'svg','canvas'
	 * :solid			是否实心(没有中心标题相关的东西)
	 * :center-title	中心标题
	 * :font-size		中心标题字体大小
	 * :font-color		中心标题颜色
	 * :name-attr		名称字段
	 * :value-attr		值字段
	 * :offset			偏移距离
	 * :main-color		颜色序列
	 * :formatter		格式化器,(<String>)=>{return <String>;}
	 * :label-formatter	标签名格式化器(同echarts)
	 * :extend-tipper	扩展提示生成器,(param)=>{return [{name:<String>,value:<String>},...]}
	 * :data			数据,[{name:<String>,value:<Number>},...]
	 * 插槽----------------------
	 * #center-title	中心标题
	 * 事件----------------------
	 * @click-chart		点击报表
	 * @click-center	点击中心标题
	 * 方法----------------------
	 * loadChart()		重加载报表
	 * resetOption()	重设选项
	 */
	import './chart/chart.scss';
	import {chartMixin} from './chart/chart';
	export default{
		name:'PieChart',
		mixins:[chartMixin],
		props:{
			solid:Boolean,
			centerTitle:String,
			fontSize:{
				type:String,
				default:'1rem'
			},
			fontColor:{
				type:String,
				default:'#000'
			},
			// 偏移距离
			offset:{
				type:Number,
				default:10
			},
			mainColor:{
				type:Array,
				default(){
					return [
						'#519bf7',
						'#06d0ab',
						'#b9aefc',
						'#ffb44a',
						'#f53f73',
						'#ebe53a',
						'#61a0a8',
						'#ca8622',
						'#4cd435',
						'#c23531'
					];
				}
			},
			labelFormatter:{
				type:[String,Function],
				default:'{b}'
			}
		},
		data(){
			/**
			 * 非响应数据
			 * innerRadius
			 */
			return {
				titleStyle:null
			};
		},
		computed:{
			listeners(){
				if(this.solid) return null;
				return {
					click:function(e){
						const box=this.$refs.chart.getBoundingClientRect();
						const r=Math.sqrt(Math.pow(box.width/2+box.left-e.clientX,2)+Math.pow(box.height/2+box.top-e.clientY,2));
						if(r<this.innerRadius/2){
							this.$emit('click-center');
						}
					}.bind(this)
				};
			},
			$_bear_resetOptionListener(){
				return [this.mainColor,this.offset,this.tipFormatterFn,this.labelFormatter];
			},
			$_bear_loadChartListener(){
				return [this.nameAttr,this.valueAttr];
			}
		},
		watch:{
			solid(){
				this.resetOption();
				this.$_bear_resetTitle({width:this.lastWidth,height:this.lastHeight});
			}
		},
		mounted(){
			this.$_bear_resetTitle({width:this.lastWidth,height:this.lastHeight});
		},
		methods:{
			// 重加载报表
			$_bear_loadChart(){
				const nameAttr=this.nameAttr;
				const valueAttr=this.valueAttr;
				let sum=0;
				// 生成报表数据
				this.oldChartData={};
				this.oldChartData.data=this.data.map(function(ele){
					const value=ele[valueAttr];
					sum+=value;
					return {
						name:ele[nameAttr],
						value:value,
						extra:ele
					};
				});
				this.oldChartData.sum=sum;
				this.resetOption();
			},
			// 重设选项
			$_bear_resetOption(){
				const offset=this.offset;
				const solid=this.solid;
				this.chart.setOption({
					color:this.mainColor,
					tooltip:{
						show:true,
						appendToBody:true,
						position:this.$_bear_tipPositionFn,
						formatter:this.tipFormatterFn
					},
					series:[{
						type:'pie',
						hoverOffset:offset,
						minAngle:2,
						avoidLabelOverlap:true,
						radius:solid?'65%':['56%','100%'],
						top:offset,
						bottom:offset,
						left:offset,
						right:offset,
						gap:0,
						label:{
							show:solid,
							formatter:this.labelFormatter,
							fontSize:13,
							alignTo:'edge',
							margin:10
						},
						labelLine:{
							length:25
						},
						itemStyle:{
							borderWidth:2,
							borderColor:'#fff'
						},
						data:this.oldChartData.data
					}]
				},true);
			},
			/**
			 * 重新计算报表大小
			 * @param {Object} data 当前大小
			 * @param {Number} data.width 宽
			 * @param {Number} data.height 高
			 */
			$_bear_resize(data){
				this.chart.resize();
				this.$_bear_resetTitle(data);
			},
			/**
			 * 重新设置标题位置
			 * @param {Object} data 当前大小
			 * @param {Number} data.width 宽
			 * @param {Number} data.height 高
			 */
			$_bear_resetTitle(data){
				if(this.solid) return;
				const offset=this.offset;
				const size=Math.floor(Math.min((data.width-offset*2)*0.56,(data.height-offset*2)*0.56));
				const position='calc(50% - '+size+'px / 2)';
				const sizeVal=size+'px';
				this.innerRadius=size;
				this.titleStyle={
					top:position,
					left:position,
					width:sizeVal,
					height:sizeVal
				};
			}
		}
	};
</script>

<style lang="scss">
	.bear-PieChart{
		>.bear-container{
			position:relative;
			width:100%;
			height:100%;
			>.bear-title{
				position:absolute;
				border-radius:50%;
			}
			>.bear-chart{
				width:100%;
				height:100%;
				z-index:1;
			}
		}
	}
</style>
